<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩(づ￣ ³￣)づ口 干杯~-bilibili</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon (1).ico" type="image/x-icon">
</head>
<body>
    <div class="nav-box">
        <div class="cover"></div>
        <div class="navigation-wrapper">
            <div class="left">
                
                <ul>
                    <li><img class="ico" src="哔哩哔哩.png"></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">番剧</a></li>
                    <li><a href="">直播</a></li>
                    <li><a href="">游戏中心</a></li>
                    <li><a href="">会员购</a></li>
                    <li><a href="">漫画</a></li>
                    <li><a href="">赛事</a></li>
                    <li><a href="">看诺奖</a></li>
                    <li><img class="download" src="picture/下载 (1).png"></li>
                    <li><a href="">下载客户端</a></li>
            </ul>
            </div>
            <div class="center">
                <input type="text" placeholder="刺客五六七第五季">
                <img src="search.svg">
            </div>
            <div class="right">
                <div class="login">登录</div>
                <div class="right-center">
                    <ul>
                        <li>
                            <img class="big" src="picture/image.png.png">
                            <span class="big_1">大会员</span>
                        </li>
                        <li>
                            <img src="picture/email.png">
                            <span>消息</span>
                        </li>
                        <li>
                            <img src="picture/风车（1）.png">
                            <span>动态</span>
                        </li>
                        <li>
                            <img src="picture/收藏.png">
                            <span>收藏</span>
                        </li>
                        <li>
                            <img src="picture/历史.png">
                            <span>历史</span>
                        </li>
                        <li>
                            <img src="picture/创作中心-copy (1).png">
                            <span>创作中心</span>
                        </li>
                    </ul>
                </div>
                <div class="up">
                    <img src="picture/upload.png">
                    <span>投稿</span>
                </div>
            </div>
        </div>
        <img class="logo" src="picture/logo.png">
    </div>
    <div class="center-box">
        <div class="column">
            <div class="column-left">
                <ul>
                    <li>
                        <div class="icon_1">
                            <img src="picture/风车（1）.png">
                        </div>
                        <span>动态</span>
                    </li>
                    <li>
                        <div class="icon_2">
                            <img src="picture/火苗-copy.png">
                        </div>
                        <span>热门</span>
                    </li>
                </ul>
            </div>
            <div class="column-center">
                <ul>
                    <li>番剧</li>
                    <li>国创</li>
                    <li>综艺</li>
                    <li>动画</li>
                    <li>鬼畜</li>
                    <li>舞蹈</li>
                    <li>娱乐</li>
                    <li>科技</li>
                    <li>美食</li>
                    <li>汽车</li>
                    <li>运动</li>
                    <li>电影</li>
                    <li>电视剧</li>
                    <li>纪录片</li>
                    <li>游戏</li>
                    <li>音乐</li>
                    <li>影视</li>
                    <li>知识</li>
                    <li>咨询</li>
                    <li>生活</li>
                    <li>时尚</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="column-right">
                <div class="line"></div>
               <div class="content">
                <ul>
                    <li>
                        <img class="good" src="picture/专栏.png">
                        <span>专栏</span>
                    </li>
                    <li>
                        <img lass="community" src="picture/活动_1.png">
                        <span>活动</span>
                    </li>
                    <li>
                        <img class="community" src="picture/nav_社区中心.png">
                        <span>社区中心</span>
                    </li>
                    <li>
                        <img class="good"  src="picture/云直播 (1).png">
                        <span>直播</span>
                    </li>
                    <li>
                        <img lass="community" src="picture/专家课堂-激活_02 (1).png">
                        <span>课堂</span>
                    </li>
                    <li>
                        <img lass="community" src="picture/nav_新歌热榜 (2).png">
                        <span>新歌热榜</span>
                    </li>
                </ul>
               </div>
            </div>
        </div>
    </div>
    <div class="botton-box">
        <div class="botton-left">
            <div class="ping">
                <span>跨越千年之爱！小白许仙囍结良缘</span>
                <span class="img1">
                    <img src="picture/向左.png">
                </span>
                <span class="img2">
                    <img src="picture/向右 (1).png">
                </span>
            </div>
            <span class="suspension">
                <img class="one" src="picture/省略号-copy-copy.png">
                
            </span>
            
           
        </div>
        <div class="botton-right">
            <div class="brick">
                <ul>
                    <li>
                        <div class="video-container1">
                            <img src="picture/新视频图片1.png" alt="视频封面1" class="video-placeholder">
                            <video class="myVideo" width="240" height="135" preload="none" muted playsinline>
                                <source src="video/视频1.mp4" type="video/mp4">
                                您的浏览器不支持 HTML5 video 标签。
                            </video>
                            <span>北疆风光之草原上的落日</span>
                        </div>

                        <div class="video-container2">
                            <img src="picture/新视频图片2.png" alt="视频封面2" class="video-placeholder">
                            <video class="myVideo" width="240" height="140" preload="none" muted playsinline>
                                <source src="video/视频2.mp4" type="video/mp4">
                                您的浏览器不支持 HTML5 video 标签。
                            </video>
                            <span>全球排名第一餐厅!</span>
                        </div>
                        
                        <div class="video-container3">
                            <img src="picture/新视频图片3.png" aalt="视频封面3" class="video-placeholder">
                            <video class="myVideo" width="240" height="135" preload="none" muted playsinline>
                                <source src="video/视频3.mp4" type="video/mp4">
                                您的浏览器不支持 HTML5 video 标签。
                            </video>
                            <span>2024最美之夜bilibili晚会</span>
                        </div>

                        <div class="video-container4">
                            <img src="picture/新视频图片4.png" alt="视频封面4" class="video-placeholder">
                            <video class="myVideo" width="240" height="135" preload="none" muted playsinline>
                            <source src="video/视频4.mp4" type="video/mp4">
                            您的浏览器不支持 HTML5 video 标签。
                        </video>
                        <span>裸眼3D最强对最强</span>
                    </div>

                    <div class="video-container5">
                        <img src="picture/新视频图片5.png" alt="视频封面5" class="video-placeholder">
                        <video class="myVideo" width="240" height="135" preload="none" muted playsinline>
                            <source src="video/视频5.mp4" type="video/mp4">
                            您的浏览器不支持 HTML5 video 标签。
                        </video>
                        <span>席卷全网的美食游戏</span>
                    </div>
                           
                    <div class="video-container6">
                        <img src="picture/6.jpg.png" alt="视频封面6" class="video-placeholder">
                            <video class="myVideo" width="240" height="135" preload="none" muted playsinline>
                                <source src="video/视频6.mp4" type="video/mp4">
                                您的浏览器不支持 HTML5 video 标签。
                            </video>
                            <span>桃园三结义</span>

                        </div>

                    </li>
                </ul>
            </div>



           <div class="part2">
            <ul>
                <li>
                    <img src="picture/Desktop 1.png">
                    <span>中国BOY超级大猩猩 · 10-9</span>
                </li>
                <li>
                    <img src="picture/Web 1920 1 (1).png">
                    <span>逗逼的雀巢 · 8-31</span>
                </li>
                <li>
                    <img src="picture/Web 1920 1 (1).png">
                    <span>三代鹿人 · 10-5</span>
                </li>
                <li>
                    <img src="picture/Desktop 1.png">
                    <span>翠花不太脆萃淬粹 · 10-11</span>
                </li>
                <li>
                    <img src="picture/Desktop 1.png">
                    <span>今天没有故事 · 10-14</span>
                </li>
                <li>
                    <img src="picture/Web 1920 1 (1).png">
                    <span>硬核奇点 · 7-10</span>
                </li>
            </ul>
           </div>



<script>
   /*            // 为每个视频容器添加鼠标悬停事件监听器
var videoContainers = document.querySelectorAll('.video-container1, .video-container2, .video-container3, .video-container4, .video-container5, .video-container6');
videoContainers.forEach(function(container) {
    container.addEventListener('mouseover', function() {
        // 鼠标悬停时播放视频
        var video = container.querySelector('video');
        video.play();
    });
    container.addEventListener('mouseout', function() {
        // 鼠标移出时暂停视频
        var video = container.querySelector('video');
        video.pause();
    });
});*/





        document.addEventListener('DOMContentLoaded', function () {
            var containers = document.querySelectorAll('.video-container1, .video-container2, .video-container3, .video-container4, .video-container5, .video-container6');

            containers.forEach(function (container) {
                var video = container.querySelector('.myVideo');
                var placeholder = container.querySelector('.video-placeholder');

                // 当鼠标悬停在容器上时播放视频
                container.addEventListener('mouseover', function () {
                    if (video.paused) {
                        video.style.opacity = '1';
                        video.style.transform = 'scale(1)';
                        video.play();
                        placeholder.style.display = 'none';
                    }
                });


              /*  //单独给第五个设置的
                const videoContainer = document.getElementById('.video-container5');
                const video = document.getElementById('.myVideo');
                videoContainer.addEventListener('mouseenter', function() {
                video.play();
       });*/

                // 当视频播放结束时恢复封面图片
               /* video.addEventListener('ended', function () {
                    video.style.opacity = '0';
                    video.style.transform = 'scale(0)';
                    placeholder.style.display = 'block';
                    video.pause();
                    video.currentTime = 0;
                });*/

                video.addEventListener('ended', function () {
                // 移除透明度和缩放的设置
                 // video.style.opacity = '0';
                  // video.style.transform = 'scale(0)';
                 // 不显示封面图片
                // placeholder.style.display = 'block';
                  // 保持视频暂停在结束位置
                     video.pause();
                // 不重置当前时间
                   // video.currentTime = 0;
});



            });
        });
    

</script>

        </div>

            
</body>
</html>